<template>
  <div class="bill" @click="billClick">
    <BillHeader />
    <main class="bill-main">
      <div v-for="(bill, index) in getBills" :key="bill.billId" class="bill-content">
        <div v-if="index === 0 || !isSameDay(bill.createTime, getBills[index - 1].createTime)" class="bill-content">
          <div class="bill-line-short"></div>
          <div v-if="!isCurrentMonth(bill.createTime)" class="bill-box">
            <div class="bill-box-left">
              <span class="bill-date-month-text">
                {{ new Date(bill.createTime).getMonth() + 1 }}月
              </span>
            </div>
            <div class="bill-date-month-circle"></div>
            <div class="bill-box-right"></div>
          </div>
          <div class="bill-line-short"></div>
          <div class="bill-box">
            <div class="bill-box-left">
              <span v-if="isDayBillSummaryEixst(bill.createTime, revenueType)">{{ getDayBillSummary(bill.createTime, revenueType) }} 收入</span>
            </div>
            <div class="bill-date-day">{{ getBillDate(bill.createTime) }}日</div>
            <div class="bill-box-right">
              <span v-if="isDayBillSummaryEixst(bill.createTime, expenseType)">支出 {{ getDayBillSummary(bill.createTime, expenseType) }}</span>
            </div>
          </div>
        </div>
        <div class="bill-line"></div>
        <div class="bill-content">
          <div class="bill-box">
            <div class="bill-box-left">
               <span v-if="isRevenue(bill.billType)">{{ bill.amount }} {{ getTag(bill.billTagId).name }}</span>
            </div>
            <div @click.stop="billIconClick(bill.billId)" class="bill-tag-icon" :style="`background-color:${getTag(bill.billTagId).color}`">
              <van-icon :name="getTag(bill.billTagId).icon" size="5vw"/>
            </div>
            <div class="bill-box-right">
              <span v-if="!isRevenue(bill.billType)">{{ getTag(bill.billTagId).name }} {{ bill.amount }}</span>
            </div>
            <transition name="bill-box-button">
              <div class="bill-box-delete" v-if="isShowEditButton(bill.billId)">
                <div @click.stop="deleteClick(bill)" class="bill-tag-icon" :style="`background-color:#CC6153`">
                  <van-icon name="delete" size="5vw"/>
                </div>
              </div>
            </transition>
            <transition name="bill-box-button">
              <div class="bill-box-edit" v-if="isShowEditButton(bill.billId)">
                <div @click.stop="editClick(bill.billId)" class="bill-tag-icon" :style="`background-color:#6C6BE6`">
                  <van-icon name="edit" size="5vw"/>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>
      <div v-if="!getBills" class="bill-content">
        <div class="bill-line"></div>
        <div class="bill-date-day">今天</div>
      </div>
      <div class="bill-create-tips">
        <div class="bill-line"></div>
        <van-icon name="smile-o" size="10vw"/>
        <p>{{ getUserCreateTime }}</p>
        <p>你开启了云记账旅程</p>
      </div>
    </main>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { BillModule, BillType, IBillData, updateType } from '../../store/modules/bill';
import { UserModule, EstimateType } from '../../store/modules/user';
import { getDate, getMonth, getFullDate } from '../../utils/date';
import BillHeader from './BillHeader.vue';

@Component({
  name: 'Bill',
  components: {
    BillHeader,
  },
})
export default class extends Vue {
  private revenueType: BillType = BillType.Revenue;
  private expenseType: BillType = BillType.Expense;
  private currentUserConfig = UserModule.userConfig;

  private mounted() {
    this.$nextTick(() => {
      this.currentUserConfig = UserModule.userConfig;
    });
  }

  private get getBills(): IBillData[] {
    return BillModule.bills;
  }
  private get isSameDay() {
    return (date1: number, date2: number): boolean => {
      return getDate(new Date(date1)) === getDate(new Date(date2));
    };
  }
  private get isCurrentMonth() {
    return (date: number): boolean => {
      return getMonth(new Date(date)) === getMonth(new Date());
    };
  }
  private get isDayBillSummaryEixst() {
    return (date: number, type: BillType) => {
      const currentMonth = getMonth(new Date(date));
      const monthlyBillIndex = this.getMonthlyBillIndex(currentMonth);
      if (monthlyBillIndex === -1) {
        return false;
      } else {
        return this.getDayBillSummaryIndex(date, type) !== -1;
      }
    };
  }
  private get getBillDate() {
    return (date: number) => {
      if (getDate(new Date(date)) === getDate(new Date())) { return '今'; }
      if (Number(getDate(new Date())) - Number(getDate(new Date(date))) === 1) { return '昨'; }
      return new Date(date).getDate();
    };
  }
  private get getDayBillSummary() {
    return (date: number, type: BillType): number => {
      if (!this.isDayBillSummaryEixst(date, type)) {
        return 0;
      }
      const currentMonth = getMonth(new Date(date));
      const monthlyBillIndex = this.getMonthlyBillIndex(currentMonth);
      const currentSummary = BillModule.billSummary[monthlyBillIndex];
      const dayBillSummaryIndex = this.getDayBillSummaryIndex(date, type);
      let dayBillSummary = 0;
      if (this.isRevenue(type)) {
        dayBillSummary = currentSummary.revenueBills[dayBillSummaryIndex].amount;
      } else {
        dayBillSummary = currentSummary.expenseBills[dayBillSummaryIndex].amount;
      }
      return dayBillSummary;
    };
  }
  private get isRevenue() {
    return (billType: number): boolean => {
      return billType === BillType.Revenue;
    };
  }
  private get getTag() {
    return (tagId: number) => {
      const tag = this.currentUserConfig.billTagList.find((current) => {
        return current.tagId === tagId;
      });
      return tag;
    };
  }
  private get getUserCreateTime(): string {
    return getFullDate(new Date(UserModule.userConfig.createTime));
  }
  private get isShowEditButton() {
    return (billId: number) => {
      return billId === BillModule.currentEditBillId;
    };
  }

  private getMonthlyBillIndex(currentMonth: string): number {
    const monthlyBillIndex = BillModule.billSummary.findIndex((item) => {
      return item.month === currentMonth;
    });
    return monthlyBillIndex;
  }
  private getDayBillSummaryIndex(date: number, type: BillType) {
    const currentMonth = getMonth(new Date(date));
    const currentDay = getDate(new Date(date));
    const monthlyBillIndex = this.getMonthlyBillIndex(currentMonth);
    const currentSummary = BillModule.billSummary[monthlyBillIndex];
    let dayBillIndex = -1;
    if (this.isRevenue(type)) {
      dayBillIndex = currentSummary.revenueBills.findIndex((item) => {
        return item.date === currentDay;
      });
    } else {
      dayBillIndex = currentSummary.expenseBills.findIndex((item) => {
        return item.date === currentDay;
      });
    }
    return dayBillIndex;
  }
  private billIconClick(billId: number) {
    BillModule.setCurrentEditBill(billId);
  }
  private deleteClick(billDate: IBillData) {
    BillModule.updateBill({ type: updateType.Delete, billData: billDate });
  }
  private editClick(billId: number) {
    const router = '$router';
    this[router].push({ path: 'bill-edit' });
    BillModule.toggleIsEditBillStatus(true);
  }
  private billClick() {
    if (BillModule.currentEditBillId !== 0) {
      BillModule.setCurrentEditBill(0);
    }
  }
}
</script>

<style scoped>
.bill, .bill-content , .bill-create-tips, .bill-box{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bill, .bill-main, .bill-content, .bill-create-tips {
  flex-direction: column;
}
.bill, .bill-main, .bill-box, .bill-content {
  width: 100%;
}
.bill-main {
  height: 100%;
  display: flex;
  align-items: center;
}
.bill-tag-icon {
  height: 60px;
  width: 60px;
  color: white;
  font-size: 26px;
  border-radius: 50%;
  text-align: center;
}
.bill-tag-icon .van-icon{
  line-height: 60px;
}
.bill-span {
  line-height: 60px;
  color: #606266;
}
.bill-date-month-text {
  line-height: 40px;
  font-size: 5px;
  margin-right: 10px;
}
.bill-date-month-circle {
  background-color: #F0F0F0;
  border-radius: 50%;
  border: 1px solid#D0CECF;
  height: 10px;
  width: 10px;
}
.bill-box-left, .bill-box-right{
  width: 345px;
}
.bill-box-left {
  text-align: right;
}
.bill-box-left span {
  padding-right: 5px;
}
.bill-box-right span {
  padding-left: 5px;
}
.bill-box-delete {
  position: absolute;
  left: 20px;
  top: 0;
}
.bill-box-edit {
  position: absolute;
  right: 20px;
  top: 0;
}
.bill-box-button-enter-active {
  animation: edit-button-in .5s;
}
.bill-box-button-active {
  animation: edit-button-in .5s reverse;
}
@keyframes edit-button-in
{
	0% { 
    transform: scale(0);
  }
	100% {
     transform: scale(1);
  }
}
.bill-date-day {
  height: 60px;
  width: 60px;
  text-align: center;
  line-height: 60px;
  color: white;
  font-size: 26px;
  border-radius: 50%;
  background-color: #D0CECF;
}
.bill-create-tips {
  color: #909399;
}
.bill-create-tips p {
  padding: 10px 0;
}
.bill-line, .bill-line-short {
  width: 0;
  height: 120px;
  border: 0.5px solid #D0CECF;
  background-color: #D0CECF;
  z-index: -1; 
}
/* 以上不加z-index:-1時，bill-line-short的z-index會失效，原因不明 */
.bill-line {
  z-index: 999;
}
.bill-line-short {
  height: 60px;
  z-index: 999;
}
</style>
